<template>
  <div class="home">
    <section class="bg_blue HosTitle fontCfff fontsB">
      医疗 - 一站式医疗健康便民服务
    </section>

    <section class="search">
      <input class="searchIn" type="text" placeholder="搜索医院、医生、科室、疾病">
    </section>

    <!-- <section class="search">
      <h3 class="HomeH fonts">门诊服务</h3>
      <section class="Select ZYselectcon">
        <div class="SelectS ZYselect ZYselect1" @click="HospitalList()">
          <img src="../../assets/img/Medical1.png" alt="">
          <p class="fontC6 fonsMiddle">预约挂号</p>
        </div>
        <div class="SelectS ZYselect ZYselect1" @click="Record()">
          <img src="../../assets/img/Medical2.png" alt="">
          <p class="fontC6 fonsMiddle">挂号记录</p>
        </div>
        <div class="SelectS ZYselect ZYselect1" @click="Sign()">
          <img src="../../assets/img/Medical3.png" alt="">
          <p class="fontC6 fonsMiddle">签到排号</p>
        </div>
        <div class="SelectS ZYselect ZYselect1">
          <img src="../../assets/img/Medical4.png" alt="">
          <p class="fontC6 fonsMiddle">签约</p>
        </div>
      </section>
      <section class="Select ZYselectcon">
        <div class="SelectS ZYselect ZYselect1">
          <img src="../../assets/img/Medical5.png" alt="">
          <p class="fontC6 fonsMiddle">门诊缴费</p>
        </div>
        <div class="SelectS ZYselect ZYselect1">
          <img src="../../assets/img/Medical6.png" alt="">
          <p class="fontC6 fonsMiddle">门诊充值</p>
        </div>
        <div class="SelectS ZYselect ZYselect1">
          <img src="../../assets/img/Medical7.png" alt="">
          <p class="fontC6 fonsMiddle">报告查询</p>
        </div>
        <div class="SelectS ZYselect ZYselect1">
          <img src="../../assets/img/Medical7.png" alt="">
          <p class="fontC6 fonsMiddle">签到排号</p>
        </div>
      </section>
    </section> -->

    <section class="search">
      <h3 class="HomeH fonts">门诊服务</h3>
      <section class="clear ZYselectcon">
        <div class="SelectS HosPitalicon" @click="HospitalList()">
          <img src="../../assets/img/Medical1.png" alt="">
          <p class="fontC6 fonsMiddle">预约挂号</p>
        </div>
        <div class="SelectS HosPitalicon" @click="Record()">
          <img src="../../assets/img/Medical2.png" alt="">
          <p class="fontC6 fonsMiddle">挂号记录</p>
        </div>
        <div class="SelectS HosPitalicon" @click="Sign()">
          <img src="../../assets/img/Medical3.png" alt="">
          <p class="fontC6 fonsMiddle">签到排号</p>
        </div>
        <div class="SelectS HosPitalicon" @click="TestResult()">
          <img src="../../assets/img/Medical7.png" alt="">
          <p class="fontC6 fonsMiddle">报告查询</p>
        </div>
        <div class="SelectS HosPitalicon" @click="Pay()">
          <img src="../../assets/img/Medical5.png" alt="">
          <p class="fontC6 fonsMiddle">门诊缴费</p>
        </div>
        <div class="SelectS HosPitalicon" @click="Recharge()">
          <img src="../../assets/img/Medical6.png" alt="">
          <p class="fontC6 fonsMiddle">门诊充值</p>
        </div>
        <div class="SelectS HosPitalicon" @click="Searchmed()">
          <img src="../../assets/img/Medical18.png" alt="">
          <p class="fontC6 fonsMiddle">药价查询</p>
        </div>
      </section>
    </section>
    <div class="clear"></div>
    <section class="search">
      <h3 class="HomeH fonts">住院服务</h3>
      <section class="Select ZYselectcon">
        <div class="SelectS ZYselect ZY1">
          <img src="../../assets/img/Medical8.png" alt="">
          <p class="fontCfff fonts">住院病床预约</p>
        </div>
        <div class="SelectS ZYselect ZY2">
          <img src="../../assets/img/Medical9.png" alt="">
          <p class="fontCfff fonts">住院信息查询</p>
        </div>
        <div class="SelectS ZYselect ZY3">
          <img src="../../assets/img/Medical10.png" alt="">
          <p class="fontCfff fonts">住院费用缴纳</p>
        </div>
        <div class="SelectS ZYselect ZY4">
          <img src="../../assets/img/Medical11.png" alt="">
          <p class="fontCfff fonts">住院报告查询</p>
        </div>
      </section>
    </section>

    <!-- <section class="search">
      <h3 class="HomeH fonts">其他服务</h3>
      <section class="Select ZYselectcon">
        <div class="SelectS ZYselect" @click="FreeConsu()">
          <img src="../../assets/img/Medical12.png" alt="">
          <p class="fontC6 fonsMiddle">义诊咨询</p>
        </div>
        <div class="SelectS ZYselect" @click="PhoneConsu()">
          <img src="../../assets/img/Medical13.png" alt="">
          <p class="fontC6 fonsMiddle">电话咨询</p>
        </div>
        <div class="SelectS ZYselect" @click="Medical()">
          <img src="../../assets/img/Medical14.png" alt="">
          <p class="fontC6 fonsMiddle">体检预约</p>
        </div>
        <div class="SelectS ZYselect">
          <img src="../../assets/img/Medical15.png" alt="">
          <p class="fontC6 fonsMiddle">药价查询</p>
        </div>
      </section>
    </section> -->

    <!-- <section class="search">
      <h3 class="HomeH fonts">我的医生</h3>
      <section>
        <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="(item, index) in SwiperDateList" :key="index">
              <section class="SwiperHos Select">
                <section class="Doctor">
                  <img src="../../assets/img/Touxiang.png" alt="">
                </section>
                <section class="SelectS">
                  <h3 class="fonts">刘艳晓 <span class="fontsMin fontC6">主治医师</span> </h3>
                  <p class="fontsMin fontC">平顶山市第一人民医院</p>
                  <div class="Select">
                    <el-button type="primary" size="small" plain>咨询</el-button>
                    <el-button type="primary" size="small" plain>就诊</el-button>
                  </div>
                </section>
              </section>
            </swiper-slide>
          </swiper>
      </section>
    </section> -->

    <section class="search">
      <section class="group Select">
        <h3 class="HomeH fonts">本地互联网医院</h3>
        <p @click="MoreHos()" class="fonts fontC6">更多 ></p>
      </section>
      <section class="Select HosAll" @click="HosRegisted()">
        <section class="HosImg">
          <img class="borderR" src="../../assets/img/image1.jpg" alt="">
        </section>
        <div class="HosCon">
          <section class="Select">
            <h3 class="fonts">平顶山市第一人民医院</h3>
          </section>
          <section class="Select HosCenter">
            <p class="activecolor fonts">三级甲等</p>
            <p class="fonts">综合医院</p>
          </section>
          <section class="Select iconDW">
            <p class="fontsMin">河南省平顶山市卫东区优越路117号</p>
          </section>
        </div>
        <div class="arrow">
          <img src="../../assets/img/arrow.png" alt="">
        </div>
      </section>
      <section class="Select HosAll" @click="HosRegisted()">
        <section class="HosImg">
          <img class="borderR" src="../../assets/img/image1.jpg" alt="">
        </section>
        <div class="HosCon">
          <section class="Select">
            <h3 class="fonts">平顶山市第一人民医院</h3>
          </section>
          <section class="Select HosCenter">
            <p class="activecolor fonts">三级甲等</p>
            <p class="fonts">综合医院</p>
          </section>
          <section class="Select iconDW">
            <p class="fontsMin">河南省平顶山市卫东区优越路117号</p>
          </section>
        </div>
        <div class="arrow">
          <img src="../../assets/img/arrow.png" alt="">
        </div>
      </section>
    </section>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '../../components/Tabbar'
// import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// import 'swiper/css/swiper.css'
export default {
  data () {
    return {
      SwiperDateList: [
        { week: '周一', date: '3月21号', num: '无号' },
        { week: '周二', date: '3月22号', num: '无号' },
        { week: '周三', date: '3月23号', num: '有号' },
        { week: '周四', date: '3月24号', num: '有号' },
        { week: '周五', date: '3月25号', num: '无号' },
        { week: '周六', date: '3月26号', num: '有号' },
        { week: '周日', date: '3月27号', num: '有号' }
      ],
      //  swiper 触摸滑动
      swiperOptions: {
        slidesPerView: 2,
        spaceBetween: 10,

        breakpoints: {
          320: { // 当屏幕宽度大于等于320
            slidesPerView: 1.4,
            spaceBetween: 1
          },
          768: { // 当屏幕宽度大于等于768
            slidesPerView: 5,
            spaceBetween: 20
          },
          1280: { // 当屏幕宽度大于等于1280
            slidesPerView: 6,
            spaceBetween: 30
          }
        }
      }
    }
  },
  mounted () {
  },
  components: {
    Tabbar
    // Swiper,
    // SwiperSlide
  },
  methods: {

    //  更多医院
    MoreHos () {
      this.$router.push({
        path: '/HospitalList'
      })
    },
    //  点击医院
    HosRegisted () {
      this.$router.push({
        path: '/HospitalDetail'
      })
    },
    //  挂号记录
    Record () {
      this.$router.push({
        path: '/Record'
      })
    },
    // 签到排号
    Sign () {
      this.$router.push({
        path: '/Sign'
      })
    },
    //  预约挂号
    HospitalList () {
      this.$router.push({
        path: '/Registered'
      })
    },
    //  报告查询
    TestResult () {
      this.$router.push({
        path: '/TestResult'
      })
    },
    //  门诊充值
    Recharge () {
      this.$router.push({
        path: '/Recharge'
      })
    },
    //  门诊缴费
    Pay () {
      this.$router.push({
        path: '/Pay'
      })
    },
    //  义诊咨询
    FreeConsu () {
      this.$router.push({
        path: '/FreeConsu'
      })
    },
    //  电话咨询
    PhoneConsu () {
      this.$router.push({
        path: '/PhoneConsu'
      })
    },
    //  体检预约
    Medical () {
      this.$router.push({
        path: '/Medical'
      })
    },
    //  药价查询
    Searchmed () {
      this.$router.push({
        path: '/DrugPrice'
      })
    }
  }
}
</script>

<style scoped>
.home {
  padding-top: 0;
}
</style>
